import { FC } from "react"
import DateSelector from "@/components/DateSelector"
import { Menu } from "antd"
import { AppstoreOutlined, MailOutlined, SettingOutlined } from "@ant-design/icons"
const { SubMenu } = Menu
import styles from "./index.less"

const medicalRecords: FC = () => {

  let hospitalizedRecord = [
    {
      title: "住院病历",
      list: [
        { date: "2019-10-12", recordName: " 入院记录", selected: false },
        { date: "2019-10-12", recordName: " 首次病程记录", selected: true },
        { date: "2019-10-13", recordName: " 常查房记录", selected: false },
      ]
    },
    {
      title: "门急诊病历",
      list: [
        { date: "2019-10-12", recordName: " 急诊记录", selected: false },
        { date: "2019-10-12", recordName: " 咽喉病历", selected: false },
        { date: "2019-10-13", recordName: " 常查房记录", selected: false },
      ]
    },
    {
      title: "其他病历",
      list: []
    }
  ]
  // let outpatientRecord = [
  //   { date: '2019-10-12', recordName: ' 急诊记录', selected: false },
  //   { date: '2019-10-12', recordName: ' 咽喉病历', selected: false },
  //   { date: '2019-10-13', recordName: ' 常查房记录', selected: false },
  // ]
  // let otherRecord: Array<any> = []

  /**
   * 渲染列表
   */

  const renderMenuList = () => {
    if (hospitalizedRecord && hospitalizedRecord.length > 0) {
      return (
        hospitalizedRecord.map(item => {
          return (
            <Menu className={styles.menuListBox} key={item.title} mode="inline" style={{ width: 256 }}>
              {
                hospitalizedRecord.length > 0 ?
                  <SubMenu className={styles.subMenuItem} key="sub1" title={`${item.title} (${item.list.length})`}>
                    {
                      item.list.map((item, index) => {
                        return (
                          <Menu.Item className={styles.menuItem} key={index}>{item.date} {item.recordName}</Menu.Item>
                        )
                      })
                    }
                  </SubMenu> : <Menu.Item>55</Menu.Item>
              }

            </Menu>
          )
        })
      )
    }
  }

  return (
    <div className={styles.testReport}>
      <div className={styles.testReportLeft}>
        <DateSelector />
        <div className={styles.reportList}>
          <div className={styles.reportCount}>共6条记录</div>
          <div className={styles.reportItemBox}>
            {
              renderMenuList()
            }
          </div>
        </div>
      </div>
      <div className={styles.reportRight} />

    </div >
  )
}

export default medicalRecords